<template>
  <div class="user-container" >
    <div class="user-info">
      <img src="../../assets/face.jpeg" alt="">
      <div class="meta">
        <h4 class="name">{{username}}</h4>
        <span>
          文明驾驶分
          <strong>0</strong> 
        </span>
      </div>
    </div>
    <ul class="group-links" >
      <li>
        <router-link to="/my" class="arrow" >
          <i class="icon"></i>
          我的账户
        </router-link>
      </li>
      <li>
        <router-link to="/order" class="arrow" >
          <i class="icon"></i>
          租车订单
        </router-link>
      </li>
      <li>
        <router-link to="/authentication" class="arrow" >
          <i class="icon"></i>
          实名认证
        </router-link>
      </li>
      <li>
        <router-link to="/safe" class="arrow" >
          <i class="icon"></i>
          安全设置
        </router-link>
      </li>
      <li>
        <router-link to="aaa" class="arrow" >
          <i class="icon"></i>
          帮助中心
        </router-link>
      </li>
    </ul>
    <button class="logout" @click="handleLogout">退出</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: this.$store.state.account.username
    }
  },
  methods: {
    handleLogout() {
      this.$store.dispatch("account/logoutAction").then(() => {
        this.$message({type: "success",message: "退出成功"});
        this.$router.push({name:"Index"});
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-container {
  padding: 0 30px;
  .user-info {
    display: flex;
    padding: 84px 0 80px 10px;
    img {
      width: 80px;
      height: 80px;
      border-radius: 100%;
      border: 6px solid #2f343a;
    }
    .meta {
      flex: 1;
      padding-left: 17px;
      .name {
        color: #909090;
        line-height: 43px;
        font-size: 18px;
      }
      span {
        display: inline-block;
        padding: 0 17px;
        height: 27px;
        line-height: 27px;
        color: #fff;
        background-color: #10a0f2;
        border-radius: 100px;
        font-size: 14px;
      }
    }
  }
  .group-links {
    li {
      position: relative;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,.3);
      line-height: 64px;
      .icon {
        width: 30px;
        height: 30px;
        background-color: #fff;
        margin: 0 16px -10px 32px;
      }
      a {
        display: block;
        color: rgba(255,255,255,.3);
        font-size: 15px;
      }
      .arrow:before {
        position: absolute;
        right: 30px;
        top: 50%;
        margin-top: -5px;
        content: "";
        width: 10px;
        height: 10px;
        border-top: 1px solid #fff;
        border-right: 1px solid #fff;
        @include webkit(box-sizing,border-box);
        @include webkit(transform, rotate(45deg));
        opacity: .2;
      }
    }
  }
  .logout {
    position: absolute;
    left: 50%;
    bottom: 60px;
    margin-left: -82px;
    width: 165px;
    height: 58px;
    text-align: center;
    line-height: 58px;
    color: #fff;
    background-color: #2d3339;
    font-size: 18px;
    border-radius: 100px;
    border: none;
    outline: none;
  }
}

</style>